<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-tree ref="orgTree" :data="treeData" node-key="id" :expand-on-click-node="false" default-expand-all  highlight-current @node-click="treeClick"></el-tree>
      </el-col>
      <el-col :span="20">
        <el-button size="small" type="primary" @click="addOrg">
          <el-icon><ele-CirclePlus /></el-icon>添加下级组织
        </el-button>
        <table class="mytable">
          <tr>
            <th style="width: 15%">组织名称</th>
            <th>{{activeTreeNode.label}}</th>
            <th style="width: 15%">
              <el-button size="small" type="primary" @click="editOrg(activeTreeNode.id)">修改</el-button>
            </th>
          </tr>
        </table>
      </el-col>
    </el-row>
    <el-dialog :title="popupTitle" :visible.sync="entityDetailVisible" width="800px">
      <OrgDetail v-if="entityDetailVisible" :visible.sync="entityDetailVisible" :entityId="popupEntityId" :pid="parseInt(activeTreeNode.id)"></OrgDetail>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import OrgDetail from '@/views/sys/org/orgDetail'
export default {
  components: {OrgDetail},
  data() {
    return {
      treeData : [],
      activeTreeNode : {},

      entityDetailVisible : false,
      popupTitle : '',
      popupEntityId : 0,
    }
  },
  mounted() {
    this.loadOrgTree();
    this.$EventBus.$on("orgchange", () => {
      this.loadOrgTree();
    });
  },
  beforeDestroy() {
    this.$EventBus.$off("orgchange")
  },
  methods: {
    loadOrgTree(){
      request({
        url: '/sys/org/orgtreedata',
        data: {orgId : 1}
      }).then(res => {
        const { data } = res
        this.treeData = data
        if(this.treeData.length > 0){
          this.activeTreeNode = this.treeData[0]
          this.$nextTick(()=>{
            this.$refs.orgTree.setCurrentKey("1")
          })
        }
      })
    },
    treeClick(treeNode){
      this.activeTreeNode = treeNode
    },
    addOrg(){
      this.popupEntityId = 0;
      this.popupTitle= "新增组织"
      this.entityDetailVisible= true
    },
    editOrg(id){
      this.popupEntityId = parseInt(id);
      this.popupTitle= "修改组织"
      this.entityDetailVisible= true
    },
  }
}
</script>

<style scoped>
</style>
